<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!-- 引入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .row{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .row p{
            width: 110px;
            text-align: center;
        }
        .row img{
            width: 40px ;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div class="row">
            <p v-for="title in titleList">{{title}}</p>
        </div>
        <div class="row" v-for="(item,index) in list">
                <img  v-if="index==0" src="./image/n1.jpg" alt=""/>
                <img  v-if="index==1" src="./image/n2.jpeg" alt=""/>
                <img  v-if="index==2" src="./image/n3.jpeg" alt=""/>
                <span  v-else style="width: 40px;"></span>
                <div v-for="obj in item.score">
                    <p>{{obj.math}}</p>   
                    <p >{{obj.chinese}}</p>   
                    <p>{{obj.english}}</p>   
                    <p >{{obj.geography}}</p>   
                    <p>{{obj.history}}</p>
                </div>
                <p> {{ item.allCount }}</p>
        </div>
    </div>

<script>
new Vue({
         el:'#demo',
         data:{
             titleList: ['姓名', '数学', '语文', '英语', '地理', '历史', '总分'],
                 list: [{
                     name: '肖锋',
                     score: [{
                         math: 99,
                         chinese: 100,
                         english: 100,
                         geography: 99,
                         history: 98
                     }],
                         allCount: 496
                     }, {

                         name: '安澜',
                         score: [{
                             math: 90,
                             chinese: 98,
                             english: 89,
                             geography: 96,
                             history: 100
                         }],
                         allCount: 473
                     }, {
                         name: '路小北',
                         score: [{
                             math: 88,
                             chinese: 87,
                             english: 77,
                             geography: 86,
                             history: 78
                         }],
                         allCount: 416
                     }, {
                         name: '许巍',
                         score: [{
                             math: 39,
                             chinese: 40,
                             english: 76,
                             geography: 90,
                             history: 59
                         }],
                         allCount: 304
                     }
                 ]

         }
    })

 </script>
 </body>
</html>